<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>



<!--https://element.eleme.cn/#/zh-CN/component/loading-->
<div id="app17">
	<template>
		<el-button
		type="primary"
		@click="openFullScreen1"
		v-loading.fullscreen.lock="fullscreenLoading">
		指令方式
	</el-button>
	<el-button
	type="primary"
	@click="openFullScreen2">
	服务方式
</el-button>
</template>
</div>

<script type="text/javascript">
	//组件初始化
	var Main = {
		data() {
			return {
				fullscreenLoading: false
			}
		},
		methods: {
			openFullScreen1() {
				this.fullscreenLoading = true;
				setTimeout(() => {
					this.fullscreenLoading = false;
				}, 2000);
			},
			openFullScreen2() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				setTimeout(() => {
					loading.close();
				}, 2000);
			}
		}
	}
	var Ctor = Vue.extend(Main);
	new Ctor().$mount('#app17');
</script>
